import * as echarts from "echarts";

// 柱状图
const column = {
    grid: {
        left: '0%',
        right: '1%',
        bottom: '1%',
        top: '7%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#00b1fc',
            fontSize: 47
        }
    },
    xAxis: {
        type: 'category',
        data: ['重庆市', '成都市', '巴中市', '广安市', '西安市'],
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 40,
            color: '#ffffff',
        }
    },
    series: [
        {
            data: [248665, 251118, 48961, 42508, 34251],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                        offset: 0,
                        color: '#00ffe6'
                    }, {
                        offset: 1,
                        color: '#00b1fc'
                    }]),
                }
            },
        }
    ]
}

// 饼图
const pie = {
    grid: {
        left: '3%',
        right: '3%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#48EFFF',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: '70%',
            data: [
                { value: 130671, name: '重庆' },
                { value: 118183, name: '海南' },
                { value: 111415, name: '云南' },
                { value: 70957, name: '湖南' },
                { value: 55090, name: '广东' },
            ],
            label: {
                fontSize: 47,
                color: '#48EFFF',
            },
            labelLine: {
                length: '5%',
                length2: '8%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 20,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                }
            }
        }
    ]
}

// 镂空饼图
const emptyPie = {
    series: [
        {
            type: 'pie',
            radius: '70%',
            data: [
                { name: '18岁以下', value: 93 },
                { name: '18-24岁', value: 32 },
                { name: '25-34岁', value: 65 },
                { name: '35-44岁', value: 44 },
                { name: '45-54岁', value: 52 },
                { name: '55岁以上', value: 52 },
            ],
            radius: ['50%', '70%'],
            outsideLabel: {
                style: {
                    fontSize: 38,
                    fill: '#48EFFF'
                },
                labelLineStyle: {
                    lineWidth: 4,
                }
            }

        }
    ]
}

// 消费额排名
const rollTable = {
    index: true,
    rowNum: 8,
    oddRowBGC: '',
    evenRowBGC: '',
    align: ['center', 'center', 'center'],
    data: [
        ['成都市', '3035万'],
        ['巴中市', '2766万'],
        ['广安市', '1654万'],
        ['西安市', '909万'],
    ],
}

// 滚动表
const rollTable2 = {
    // index: true,
    rowNum: 5,
    oddRowBGC: '',
    evenRowBGC: '',
    align: ['center', 'center', 'center'],
    data: [
        ['渠县', '262719'],
        ['通川区', '764373'],
        ['达川区', '700536'],
        ['开江县', '778679'],
        ['万源市', '528481'],
        ['大竹县', '426510'],
        ['宣汉县', '259607'],
    ],
}

// 饼图
const pie2 = {
    series: [
        {
            type: 'pie',
            radius: '70%',
            data: [
                { name: '过夜', value: 81 },
                { name: '不过夜', value: 19 },
            ],
            insideLabel: {
                show: true,
                style: {
                    fontSize: 42,
                    fill: '#ffffff',
                    textAlign: 'center',
                    textBaseline: 'middle'
                }
            },
            outsideLabel: {
                style: {
                    fontSize: 42,
                    fill: '#43a9c6',
                },
                labelLineBendGap: '20%',
                labelLineStyle: {
                    lineWidth: 4,
                }
            }
        },

    ]
}

// 折线图
const foldLine = {
    grid: {
        left: '3%',
        right: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点'],
        axisLabel: {
            fontSize: 32,
            color: '#43a9c6',
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 32,
            color: '#43a9c6',
        }
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#000',
        textStyle: {
            color: '#7703c8',
            fontSize: 47
        }
    },
    series: [
        {
            data: [4644087, 4777251, 4590556, 4731275, 4769965, 4572666, 4893845, 4820030, 4996337, 4622456, 4836828, 4984396, 4708615, 4606337, 4971234, 4920765, 4951626, 4503383, 4591495, 4837437, 4881326, 4663829, 4958148],
            type: 'line',
            smooth: true,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#4b2282'
                    },
                    {
                        offset: 1,
                        color: '#0c5075'
                    }
                ])
            },
            lineStyle: {
                normal: {
                    width: 5
                }
            }

        }
    ],
    color: ['#bb00ea']
}

// 柱状图
const column2 = {
    grid: {
        containLabel: true
    },
    xAxis: {
        data: ['1-2小时', '2-4小时', '4小时以上'],
        axisLabel: {
            style: {
                fill: '#43a9c6',
                rotate: 0,
                fontSize: 42
            }
        },
    },
    yAxis: {
        data: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            style: {
                fill: '#43a9c6',
                rotate: 0,
                fontSize: 42
            }
        },
    },
    series: [
        {
            data: [1000, 900, 800],
            type: 'bar',
            gradient: {
                color: ['#00ffe6', '#00b1fc']
            }
        }
    ]
}

// 条形图
const option = {
    grid: {
        left: '13%',
        right: '10%',
    },
    xAxis: {
        type: 'category',
        data: ['1-2h', '2-4h', '4h以上'],
        axisLabel: {
            fontSize: 38,
            color: '#43a9c6',
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 38,
            color: '#43a9c6',
        }
    },
    series: [
        {
            data: [600, 400, 200],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        }
    ]
};


// 性别分布
const pieOption = {
    grid: {
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#43a9c6',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '60%'],
            data: [
                { value: 5000, name: '男' },
                { value: 5000, name: '女' }
            ],
            label: {
                fontSize: 47,
                color: '#43a9c6',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 游客出行方式分布
const pieOption2 = {
    grid: {
        top: '0%',
        bottom: '0%',
        left: '0%',
        right: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#43a9c6',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '60%'],
            data: [
                { value: 55, name: '高铁' },
                { value: 23, name: '自驾' },
                { value: 12, name: '飞机' },
                { value: 10, name: '其他' },
            ],
            label: {
                fontSize: 47,
                color: '#43a9c6',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 游客出行方式分布
const pieOption3 = {
    grid: {
        left: '0%',
        right: '7%',
        bottom: '5%',
        top: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#43a9c6',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '60%'],
            data: [

                { value: 800, name: '20岁以下' },
                { value: 2400, name: '20-30岁' },
                { value: 3100, name: '31-40岁' },
                { value: 2800, name: '41-50岁' },
                { value: 900, name: '50岁以上' },
            ],
            label: {
                fontSize: 47,
                color: '#43a9c6',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};


// 游客资产等级分布
const pieOption4 = {
    grid: {
        left: '0%',
        right: '7%',
        bottom: '5%',
        top: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#43a9c6',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '60%'],
            data: [

                { value: 4800, name: '低收入' },
                { value: 3200, name: '中等收入' },
                { value: 2000, name: '高收入' },
            ],
            label: {
                fontSize: 47,
                color: '#43a9c6',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 游客资产等级分布
const pieOption5 = {
    grid: {
        left: '0%',
        right: '7%',
        bottom: '5%',
        top: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#43a9c6',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '60%'],
            data: [
                { value: 2200, name: '酒店' },
                { value: 1800, name: '餐饮' },
                { value: 1100, name: ' 出行' },
                { value: 2000, name: ' 旅游' },
                { value: 1300, name: ' 购物' },
                { value: 1600, name: '娱乐' },
            ],
            label: {
                fontSize: 47,
                color: '#43a9c6',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 柱状图
const column3 = {
    grid: {
        left: '0%',
        right: '1%',
        bottom: '1%',
        top: '7%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#00b1fc',
            fontSize: 47
        }
    },
    xAxis: {
        type: 'category',
        data: ['成都市', '巴中市', '广安市', '西安市'],
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 40,
            color: '#ffffff',
        }
    },
    series: [
        {
            data: [3035, 2766, 2290, 1654, 909],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                        offset: 0,
                        color: '#00ffe6'
                    }, {
                        offset: 1,
                        color: '#00b1fc'
                    }]),
                }
            },
        }
    ]
}

export default {
    column,
    pie,
    emptyPie,
    rollTable,
    rollTable2,
    pie2,
    foldLine,
    column2,
    option,
    pieOption,
    pieOption2,
    pieOption3,
    pieOption4,
    pieOption5,
    column3
}